<script setup lang="ts">
import HeaderView from './components/HeaderView/index.vue'
import ToolsView from './components/ToolsView/index.vue'
import DragramBoard from './components/DragramBoard/index.vue'
import useDragramStore from '@/pages/table-diagraming/store/useDragramStore'
import type { FormType } from './types'
import ColumnOptionDrawer from './components/OptionsDrawer/ColumnOptionDrawer.vue'
import SearchOptionModal from './components/OptionsDrawer/SearchOptionModal.vue'
import ApiParse from './components/APIParse/index.vue'
useHead({
  title: 'Table页面设计器'
})

let currentEL: HTMLElement

const handleDrapStart = (e: DragEvent) => {
  currentEL = e.target as HTMLElement
}

const dragramStore = useDragramStore()
const handleDrop = (e: DragEvent) => {
  const type = currentEL.dataset.type as FormType
  const name = currentEL.dataset.title as string
  // console.log(type, name)
  dragramStore.addSearchItem(type, name)
}
// TODO
const [parseAPIToggle, handleParseAPIToggle] = useToggle(true)
</script>

<template>
  <div class="table-diagraming" @dragstart="handleDrapStart" @drop="handleDrop">
    <header-view class="header" />
    <tools-view class="tools" />
    <dragram-board class="dragram" @openParseHttpDialog="handleParseAPIToggle" />
    <column-option-drawer />
    <search-option-modal />
    <api-Parse v-model="parseAPIToggle" />
  </div>
</template>

<style lang="scss" scoped>
.table-diagraming {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 220px minmax(1200px, 1fr);
  grid-template-rows: 55px minmax(600px, 1fr);
  grid-template-areas: 'header header' 'tools dragram';
  background-color: var(--primary-bg-color);
  .header {
    grid-area: header;
  }
  .tools {
    grid-area: tools;
  }
  .dragram {
    grid-area: dragram;
  }
}
</style>
